<template>
  <div class="main-panel">
    <div class="menus">
      <div v-for="(menu, index) in menus " :key="index" @click="toPage(menu)">
        <!-- menu打印为{name: '文章管理', href: '/dashboard/article'} -->
        {{ menu.name }}
      </div>
    </div>
    <div style="padding:19px;width:100%">
      <router-view></router-view>
    </div>
  </div>
  <div class="title">后台管理系统</div>
</template>
<script setup>
import { AdminStore } from '../../stores/AdminStore'
import { ref, reactive, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const message = inject("message")
const axios = inject("axios")

const adminStore = AdminStore()

//菜单
let menus = [
  { name: "文章管理", href: "/dashboard/article" },
  { name: "分类管理", href: "/dashboard/category" },
  { name: "退出", href: "/login" },
];

let toPage = (menu) => {
  router.push(menu.href)
}
</script>
<style scoped lang='scss'>
.main-panel {
  display: flex;
  color: #64676a;
  max-width: 1500px;
  margin: 0 auto;
}

.menus {
  padding: 19px 0;
  box-sizing: border-box;
  line-height: 55px;
  text-align: center;
  width: 180px;
  height: 95vh;
  border-right: 1px solid #dadada;

  div {
    cursor: pointer;

    &:hover {
      color: #fd760e;
    }
  }
}

.title {
  font-size: 65px;
  font-weight: bold;
  text-align: right;
  position: fixed;
  color: rgba(0, 0, 0, 20%);
  right: calc((100vw - 1500px) / 2);
  bottom: 20px;
}
</style>
